<template>
	<view class="">
		<up-button :customStyle="customStyle" @click="show = true" style="margin: 0;" size="small" type="success"
			text="取消订单"></up-button>
		<up-popup :show="show" mode="center" @close="show = false" :safeAreaInsetBottom="false">
			<view class="popup">
				<image class="popup-top-bj" src="@/static/image/popup-bj.png"></image>
				<view class="popup-content">
					<view class="title">
						取消订单
					</view>
					<view class="line">
						<view class="label">取消原因</view>
						<view class="value">
							<CancelCause @change="form.reason_id = $event" />
						</view>
					</view>
					<u--textarea v-model="form.reason_info" placeholder="请输入详细的取消原因"></u--textarea>
					<view class="popup-bottom">
						<view class="">
							<up-button @click="show = false" type="info" text="取消"></up-button>
						</view>
						<view class="">
							<up-button @click="handleSumbit" type="primary" text="确定"></up-button>
						</view>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import CancelCause from './cancel_cause.vue'
	import {
		ref
	} from 'vue'
	import order from '@/api/order.js'
	import utils from '@/utils/util.js'
	const props = defineProps({
		id: {
			type: [String, Number],
			default: ''
		}
	})
	const customStyle = {
		width: '156rpx',
		borderRadius: '12rpx !important'
	}
	const show = ref(false)
	const text = ref('')
	const form = ref({
		id: '',
		reason_id: '',
		reason_info: ''
	})
	const handleSumbit = async () => {
		form.value.id = props.id
		if (form.value.reason_id == '') {
			utils.toast('请选择取消原因')
			return
		}
		const now_role = uni.getStorageSync('userInfo').now_role
		const {
			status,
			info,
			data
		} = now_role == 1 ? await order.userCancelOrder(form.value) : await order.driverCancelOrder(form.value)
		utils.toast(info)
		if (status == 1) {
			show.value = false
			uni.navigateBack()
		}
	}
</script>

<style lang="scss" scoped>
	.line {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #F5F5F5;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;

		.label {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 33rpx;
		}
	}
</style>